<template>
  <div class='auto clu'>
    <tree :model="model" v-ref:tree>
      <span partial>{{row.data.name}}
        <input type="checkbox" v-model="row.mark" @click="$parent.$parent.modifyMark(row)">
      </span>
    </tree>
  </div>
</template>

<script>
import * as Util from "../Util"

export default {
  title: "策略授权",
  props: ['data'],
  data () {
    return {
      test: false,
      datas: [],
      model: Util.f
    }
  },
  // events: {
  //   'select-changed': function (data) {
  //     // 事件回调内的 `this` 自动绑定到注册它的实例上
  //     this.model2 = data.val.data.children
  //   }
  // },

  methods: {
    modifyMark (row) {
      console.log(row.mark)
      if(!row.mark) { // 选择
        this.modifyChlidrenTrue(row)
        this.modifyParentTrue(row)
      }else { // 取消选择
        this.modifyChlidrenFalse(row)
        this.modifyParentFalse(row)
      }
    },
    // 学则，选择框被选择后，向下修改
    modifyChlidrenTrue (row) {
      // 修改本节点
      row.mark = true
      // 向下修改
      if (row.children && row.children.length > 0) {
        row.children.forEach((obj) => {
          console.log(obj.mark)
          if (!(obj.mark === undefined)) {
            this.modifyChlidrenTrue(obj)
          }
        })
      }
    },
    // 向上修改
    modifyParentTrue(row) {
      row.mark = true
      // 如果有父节点，修改父节点的状态
      if(row.parent && row.parent.mark === false) {
        this.modifyParentTrue(row.parent)
      }
      // // 如果有父节点，此时父节点必然为false,在此不必再加判断
      // if(row.parent) {
      //   // 判断父节点中所有子节点是否都为true，否的话不做任何处理
      //   let m = row.parent.children.every((row) => {
      //     return row.mark === true
      //   })
      //   if(m) {
      //     this.modifyParentTrue(row.parent)
      //   }
      // }
    },
    // 学则，选择框被选择后，向下修改
    modifyChlidrenFalse (row) {
      // 修改本节点
      row.mark = false
      // 向下修改
      if (row.children && row.children.length > 0) {
        row.children.forEach((obj) => {
          console.log(obj.mark)
          if (!(obj.mark === undefined)) {
            this.modifyChlidrenFalse(obj)
          }
        })
      }
    },
    // 想上修改
    modifyParentFalse(row) {
      row.mark = false
      if(row.parent) {
        // 判断父节点中所有子节点是否都为false，否的话不做任何处理
        let m = row.parent.children.every((row) => {
          return row.mark === false
        })
        if(m) {
          this.modifyParentFalse(row.parent)
        }
      }
      // if(row.parent && row.parent.mark === true) {
      //   this.modifyParentFalse(row.parent)
      // }
    }
  }
}
</script>
<style media="screen">
  .clu {
    display: flex;
    padding-left: 20px;
  }
</style>
